
<template>
  <div class="tabbar">
    <div class="headhome" v-hometitle="{num:0,isColor:true}">
      <!-- title -->
      <ul class="title">
        <li v-if="!isLogin" @click="handleClick('/login')">登录</li>
        <li v-if="isLogin" @click="handleClick('/mine')">{{isLogin}}</li>
        <li class="search" @click="handleClick('/search')">
          <span class="iconfont icon-sousuo"></span>
          <span>{{search}}</span>
        </li>
        <!-- <li class="iconfont icon-gouwu" @click="handleClick('/cart')"></li> -->
        <li @click="handleClick('/cart')">
          <van-icon class="icon-gouwu" name="bag-o" :badge="plist.length" />
        </li>
      </ul>
      <!-- nav -->
      <div class="nav">
        <ul>
          <ol :class="{active:home}" @click="homeClick">
            推荐
            <span></span>
          </ol>
          <router-link
            v-for="(data,index) in navList"
            :key="index"
            tag="li"
            :to="{
                name:'silo',
                params:{id:data.englishId}
            }"
            active-class="active"
            @click.native="indexClick(data)"
          >
            {{data.name}}
            <span></span>
          </router-link>
          <ol :class="{active:upcoming}" @click="upcomingClick">
            即将上线
            <span></span>
          </ol>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapMutations, mapState, mapActions } from "vuex";

export default {
  name: "Home",
  data() {
    return {
      isLogin:"",
      search: "",
      navList: "",
    };
  },
  computed:{
    ...mapState("tabbar",["home","upcoming","color"]),
    ...mapState("cart",["plist"])
  },
  methods: {
    ...mapActions("silo", ["getBanners", "getDataList"]),
    ...mapMutations("tabbar",["homeTrue","homeFalse","upcomingTrue","upcomingFalse"]),
    handleClick(path) {
      this.$router.push(path);
    },
    handleIndex(index) {
      if (index === 0) {
        this.router.push("/index");
      }
    },
    homeClick() {
      if (this.home === true) {
      } else {
        this.homeTrue()
        this.upcomingFalse()
        this.$router.push("/");
      }
    },
    upcomingClick() {
      if (this.upcoming === true) {
      } else {
        this.homeFalse()
        this.upcomingTrue()
        this.$router.push("/upcoming");
      }
    },
    indexClick(data) {
      this.homeFalse()
      this.upcomingFalse()
      this.getBanners(data.categoryId);
      this.getDataList(data.englishId);
    }
  },
  created() {
    this.isLogin = localStorage.getItem("username")
    //search  搜索框数据
    axios.get("http://www.mei.com/appapi/search/searchDefault/v3").then(res => {
      this.search = res.data.words;
    });
    //nav 导航栏
    axios
      .get(
        "http://www.mei.com/appapi/silo/navigationAll/v3?timestamp=1586397861889&summary=b6431b6c26b75ee07f0e67f5fe429778"
      )
      .then(res => {
        let navArr = [
          "crossborder",
          "women",
          "men",
          "cosmetics",
          "lifestyle",
          "kids"
        ];
        for (let i = 0; i < res.data.lists.length; i++) {
          res.data.lists[i].englishId = navArr[i];
        }
        this.navList = res.data.lists;
      });
  }
};
</script>

<style lang="scss" scoped>
.headhome {
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  .title {
    margin-top: 0.08rem;
    line-height: 0.34rem;
    overflow: hidden;
    //搜索框
    .search {
      width: 2.75rem;
      height: 0.34rem;
      background: rgb(212, 206, 206, 0.5);
      span {
        margin-left: 0.08rem;
      }
    }
    li {
      height: 0.34rem;
      width: 0.5rem;
      float: left;
      text-align: center;
      font-size: 0.14rem;
    }
    .icon-gouwu {
      font-size: 0.22rem;
     .van-info{
       top:8px;
       right: 3px;
     }
    }
  }
  // 导航栏
  .nav {
    overflow-x: auto;
    // display: flex;
    // align-items: center;
    ul {
      width: 112%;
      display: flex;
      align-items: center;
      white-space: nowrap;
      .active {
        span {
          border-bottom: 2px solid;
        }
      }
      li,
      ol {
        text-align: center;
        width: 0.4rem;
        height: 0.44rem;
        line-height: 0.44rem;
        margin: 0 0.05rem;
        position: relative;
        span {
          position: absolute;
          bottom: 0.1rem;
          left: 33%;
          width: 0.12rem;
        }
      }
    }
  }
}
</style>
